<template>
    <div class=" header main">
        <!--  登录/注销-->
        <span id="header">
            <span>
                <span>{{mname}}</span>
                <el-button type="primary" plain v-if="this.principal === null" @click="dd1()" style="height: 37px;width: 70px">登录</el-button>
                <el-button type="info" plain v-else @click="output()" style="height: 37px;width: 70px">注销</el-button>
            </span>
        </span>

        <!-- 导航栏-->
        <div style="width: 80%">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     active-text-color="red"
                     style="font-weight:bold">
                <el-menu-item index="5" @click="$router.push('/shouye')">首页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('/product')">商品展示</el-menu-item>
                <el-menu-item index="3" @click="$router.push('/activity')">专享活动</el-menu-item>
                <el-menu-item index="4" @click="$router.push('/shoppingCart')">购物车</el-menu-item>
                <el-menu-item index="1" @click="$router.push('/personalCenter')">个人中心</el-menu-item>
            </el-menu>
        </div>

        <!-- 顶部-->
        <div class="brandsDiv">
            <ul class="brands">
                <li clstag="channel|keycount|1839|brand_6_1">
                    <a href="//aokang.jd.com/" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t5932/277/3198966620/3185/b342ac35/594ce99eNfe23133f.png!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_2">
                    <a href="//mall.jd.com/index-608668.html" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t5287/185/1175725922/5743/9e724cfe/590c4568Na30ce06c.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_4">
                    <a href="https://mall.jd.com/index-20550.html" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t24505/176/41565957/3539/bd10e5d3/5b2374ddN282c0469.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_3"><a href="//mall.jd.com/index-53379.html" target="_blank">
                    <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t4546/238/4271202928/3497/7bb3b13b/590c45b3N81337e85.jpg!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_5"><a href="//qipilang.jd.com/" target="_blank">
                    <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t5800/361/4425612374/2780/4f9a4d66/594de176Nab056268.png!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_6">
                    <a href="https://mall.jd.com/index-35324.html?cpdad=1DLSUE" target="_blank">
                        <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t9898/257/294758224/3973/23d11cd0/59cb55f0Nb8e1704d.png!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_7"><a href="https://mall.jd.com/index-184352.html" target="_blank">
                    <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t8755/133/778687037/3117/aca98a6d/59ae5f6dNbce03bb6.jpg!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_0">
                    <a href="//mall.jd.com/index-115708.html" target="_blank">
                        <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t4288/308/3058772343/4004/4507d308/58d9dd35N3f993761.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_8">
                    <a href="https://mall.jd.com/index-68668.html" target="_blank">
                        <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t4180/289/3052404473/7699/f43f16da/58d9dc68N474601cd.jpg!q95.webp"><em></em>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 遮罩层 1-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="resetForm"> <!--取消后清空表格中数据-->
            <el-button type="primary" round @click="add()" plain style="float: left">新增地址</el-button>

            <el-table :data="data2"
                      tooltip-effect="dark"
                      style="width: 100%;"
                      @selection-change="handleSelectionChange">
                <!-- <el-table-column prop="tid" label="地址编号"></el-table-column>-->
                <el-table-column prop="realName" label="收货姓名"></el-table-column>
                <el-table-column prop="realPhone" label="收货电话"></el-table-column>
                <el-table-column prop="realAddress" label="收货地址" width="260px"></el-table-column>

                <el-table-column>
                    <template slot-scope="scope">
                        <i class="el-icon-edit" @click="update(scope.row)"></i>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="el-icon-delete" @click="del(scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>
            <br/>
            <div class="page2">
                <el-pagination
                    background
                    center
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page.sync="currentPage2"
                    :page-size="pageSize2"
                    :page-sizes="pageList2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="myAddress.length">
                    <!--           layout加上 sizes,    :page-sizes="[6, 7, 8, 9 ,10]"-->
                </el-pagination>
            </div>
        </el-dialog>

        <!-- 遮罩层 2-->
        <el-dialog :title="title2" :visible.sync="dialogFormVisible2" @close="resetForm2"> <!--取消后清空表格中数据-->
            <div>
                <el-form :model="empInfo" :rules="rules" ref="empInfo">
                    <el-form-item label="收货姓名" :label-width="formLabelWidth" prop="realName">
                        <el-input placeholder="请输入收货姓名" v-model="empInfo.realName" ></el-input>
                    </el-form-item>
                    <el-form-item label="收货电话" :label-width="formLabelWidth" prop="realPhone">
                        <el-input placeholder="请输入收货电话" v-model.number="empInfo.realPhone" ></el-input>
                    </el-form-item>
                    <el-form-item label="收货地址" :label-width="formLabelWidth" prop="realAddress">
                        <!--多行文本框-->
                        <el-input type="textarea" :rows="5" placeholder="请输入详情地址" v-model="empInfo.realAddress"></el-input>
                    </el-form-item>
                </el-form>

                <div  class="dialog-footer">
                    <el-button type="primary" @click="sub('empInfo')" style="float: right;padding: 10px 30px;margin: 0px 30px">确 认</el-button>
                    <br/><br/>
                </div>
            </div>
        </el-dialog>

        <!-- 中部-->
        <center>
            <table width="85%" border="0" cellpadding="0" cellspacing="0" style="margin: 30px auto">
                <tr>
                    <td style="vertical-align:top;padding: 50px 0px 50px 0px">
                        <!-- 用户头像和地址-->
                        <div
                            v-loading="loading"
                            element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.8)"
                            style="width: 200px;height: 250px;float: left;border: 1px solid #909399;border-radius: 30px;text-align: center">
                            <div style="width: 200px;height: 200px;">
                                <img class="productPicWidth" :src="getUrl(this.picPath)" alt="" style="margin: 20px auto;width: 100px;height: 100px;border: 1px solid #909399;border-radius: 80px;">

                                <div>
                                    <el-upload
                                        style="position: absolute;margin: 0px 0px 0px 150px;top: 300px"
                                        class="upload-demo"
                                        :action="insertUrl()"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload"
                                    >
                                        <span class="el-icon-edit" ></span>
                                    </el-upload>
                                </div>

                                <div>账号:{{accountId}}</div>
                            </div>
                            <div style="width: 200px;height: 30px;">
                                <el-link @click="toAddress()" type="primary">我的地址</el-link>
                            </div>
                        </div>
                    </td>

                    <td>
                        <!--            用户订单-->
                        <div style="width: 95%;border: 1px solid #909399;border-radius: 15px;float: right;text-align: center">
                            <!--                搜索框-->
                            <div style="width: 1000px;height: 50px;border-bottom: 1px solid lightgrey">
                                <div style="width: 1000px;height: 40px;margin: 5px auto">
                                    <el-input placeholder="请输入内容" v-model="lableName" class="input-with-select" style="width: 90%" clearable>
                                        <el-button slot="append" @click="selectOrderStade(status)" icon="el-icon-search"></el-button>
                                    </el-input>
                                </div>
                            </div>
                            <!--                订单导航栏-->
                            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                                     active-text-color="#E6A23C"
                                     style="">
                                <el-menu-item style="width: 250px" index="1"  @click="selectOrderStade(3)">全部订单</el-menu-item>
                                <el-menu-item style="width: 250px" index="2"  @click="selectOrderStade(0)">未付款</el-menu-item>
                                <el-menu-item style="width: 250px" index="3"  @click="selectOrderStade(1)">进行中</el-menu-item>
                                <el-menu-item style="width: 250px" index="4"  @click="selectOrderStade(2)">已完成</el-menu-item>
                            </el-menu>
                            <!--                订单列表-->
                            <div style="width: 1000px;height: 100%;">
                                <el-table
                                    :data="data"
                                    style="width: 100%">
                                    <el-table-column type="expand">
                                        <template slot-scope="props">
                                            <el-form label-position="left" inline class="demo-table-expand">
                                                <el-form-item label="支付类型：">
                                                    <span>{{ props.row.payType }}</span>
                                                </el-form-item>
                                                <el-form-item label="收货地址：">
                                                    <span>{{ props.row.shippingAddress }}</span>
                                                </el-form-item><br/>
                                                <el-form-item label="发送方式：">
                                                    <span>{{ props.row.postWay }}</span>
                                                </el-form-item>&nbsp;&nbsp;&nbsp;
                                                <el-form-item label="配送费：">
                                                    <span>{{ props.row.postFee }}</span>
                                                </el-form-item>&nbsp;&nbsp;&nbsp;
                                                <el-form-item label="购买数量：">
                                                    <span>{{ props.row.payStatus }}</span>
                                                </el-form-item>
                                                <br/>
                                                <el-form-item label="订单总价：">
                                                    <span>{{ props.row.totalPrice }}</span>
                                                </el-form-item>
                                                <el-form-item label="商品单价：">
                                                    <span>{{ props.row.tbPrdInfoList.price }}</span>
                                                </el-form-item>
                                                <el-form-item label="商品短述：">
                                                    <span>{{ props.row.tbPrdInfoList.shortDesc }}</span>
                                                </el-form-item><br/>
                                                <el-form-item label="商品编号：">
                                                    <span>{{ props.row.tid }}</span>
                                                </el-form-item>
                                            </el-form>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="流水号"
                                        prop="oid">
                                    </el-table-column>
                                    <el-table-column
                                        width="200px"
                                        label="商品名称"
                                        prop="tbPrdInfoList.labelName">
                                    </el-table-column>
                                    <el-table-column
                                        width="100px"
                                        label="收货人"
                                        prop="shippingName">
                                    </el-table-column>
                                    <el-table-column
                                        width="150px"
                                        label="收货电话"
                                        prop="shippingPhone">
                                    </el-table-column>

                                    <el-table-column prop="status" label="状态">
                                        <template slot-scope="scope">
                                            <el-tag type="danger" v-if="scope.row.status === 0" @click="toOrderDetails(scope.row)">未付款</el-tag>
                                            <el-tag type="success" v-if="scope.row.status === 1" @click="toOrderDetails(scope.row)">发货中</el-tag>
                                            <el-tag type="info" v-if="scope.row.status === 2" @click="toOrderDetails(scope.row)">已完成</el-tag>
                                            <el-tag type="warning" v-if="scope.row.status === 4" @click="toOrderDetails(scope.row)">已失效</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="订单时间"
                                        prop="createDate">
                                    </el-table-column>
                                </el-table>
                                <br/>
                                <!--                    分页-->
                                <div class="page">
                                    <el-pagination
                                        background
                                        center
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page.sync="currentPage"
                                        :page-size="pageSize"
                                        :page-sizes="pageList"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="list.length">
                                        <!--           layout加上 sizes,    :page-sizes="[6, 7, 8, 9 ,10]"-->
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </center>

        <!-- 底部-->
        <div>
            <center>
                <table width="70%" border="0" cellpadding="0" cellspacing="0" >
                    <tr>
                        <td colspan="3">
                            <img src="../assets/img/1004.jpg" width="100%">
                            <img src="../assets/img/2006.jpg" width="100%">
                        </td>
                    </tr>
                </table>
            </center>
            <div class="img">
                <img src="../assets/img/d0.png" style="width: 100%;">
            </div>
            <div class = "under">
                <a href="#" target="_blank" rel="nofollow">免费声明 </a>
                <a href="#" target="_blank" rel="nofollow">关于我们 </a>
                <a href="#" target="_blank" rel="nofollow">支付方式 </a>
                <a href="#" target="_blank" rel="nofollow">联系我们 </a>
                <a href="#" target="_blank" rel="nofollow">营业执照 </a>
                <a href="#" target="_blank" rel="nofollow">服务条款 </a>
            </div>
            <br>
            <div class="img">
                <img src="../assets/img/d1.png" style="width: 100%;">
            </div>
            <div class="footer-edit">
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">Copyright © 1999 河南AAA有限公司 地址：郑州市新郑市AAA软件教育</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);"> 本网站部分图片来源于网络,如有侵权请联系我们,我们会尽快处理&nbsp;</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">&nbsp;</span>
                    <a href="http://www.baidu.com" target="_blank" style="color: rgb(165, 165, 165);">郑州昆旅国际旅行社太康路营业部</a></p>
                <p style="line-height: 1.0em;">
                <span style="color: rgb(165, 165, 165);">服务热线0371-888888&nbsp;
                    <span style="color: rgb(165, 165, 165);">微信：18838965238&nbsp; 15981917089&nbsp;</span>
                    在线QQ：1479430525&nbsp; 1479430525&nbsp; &nbsp;</span></p>
                <p style="line-height: 1.0em;">
                    <a href="https://www.baidu.com" target="_blank"></a>
                    <span style="color: rgb(165,165,165);">
                        <span style="color: rgb(153, 153, 153); font-family: PingFang SC;,Microsoft Yahei UI, Microsoft Yahei&quot;,Hiragino Sans GB;, Helvetica, STHeiti, sans-serif; background-color: rgb(249, 249, 249);">
                            旅行社业务经营许可证号 L-HEN-CJ00011
                        </span>
                    </span>
                    豫ICP备19990315号
                    <a/>
                </p>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'PersonalCenter',
        inject:['reload'],//注入reload方法
        data () {
            return {
                // 默认图片
                defaultPic: "logo.png",
                // 当前页
                currentPage: 1,
                currentPage2: 1,
                // 每页显示 5 条数据
                pageSize: 5,
                pageSize2: 5,
                // 每页显示多少条数据的数组
                pageList: [5, 10, 15, 20],
                pageList2: [5, 10, 15, 20],
                principal: sessionStorage.getItem('token'),
                accountId: sessionStorage.getItem('username'),
                phone:{
                    accountId: sessionStorage.getItem('username'),
                },
                ltname:{
                    phone: sessionStorage.getItem('username'),
                },
                mname: '已登录',
                list: [],
                myAddress:[],
                picPath:'logo.png',
                activeIndex: '1',
                lableName: '',
                status: 3,
                dialogFormVisible: false,
                dialogFormVisible2: false,
                formLabelWidth: '120px',
                title: "我的地址:",
                title2: "新增收货地址:",
                loading: false,
                empInfo: {
                    accountId: sessionStorage.getItem('username'),
                },
                rules: { //校验输入框输入规则
                    realName:[
                        { required: true, message: '请输入收货人姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    realPhone:[
                        { required: true, message: '请输入收货人电话', trigger: 'blur'},
                        { type: 'number', message: '请输入数字', trigger: 'blur'}
                    ],
                    realAddress:[
                        { required: true, message: '请输入收货人详细地址', trigger: 'blur' },
                        { min: 10, max: 60, message: '长度在 10 到 60 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        created () {
            if (this.principal === null) {
                this.mname = '未登录'
                this.$message({
                    type: 'info',
                    message: '请先登录!'
                })
                this.$router.push('/login')
            } else {
                this.$http.post('order/order/findByTbid', {accountId: this.accountId, status: this.status, lableName: this.lableName}).then(data => {
                    this.list = data
                })

                this.$http.post('order/address/findByTbid', this.phone).then(data => {
                    this.myAddress = data
                })

                this.$http.post("account/account/listByPhone",this.ltname).then(data => {
                    this.picPath = data[0].picPath
                })
            }
        },
        computed: {
            // 计算分页所显示的数据
            data () {
                if (this.list != null) {
                    // 使用 splice 方法从第几个开始取出多少条数据
                    return this.list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
                }
            },
            data2 () {
                if (this.myAddress != null) {
                    // 使用 splice 方法从第几个开始取出多少条数据
                    return this.myAddress.slice((this.currentPage2 - 1) * this.pageSize2, this.currentPage2 * this.pageSize2)
                }
            }
        },
        methods: {
            toOrderDetails(row){
                console.log(row)
                if(row.state === 1){
                    // findByOid
                    this.$router.push({path:"/orderDetails",query:{oid:row.oid}})
                }else{
                    this.$router.push({path:"/activityorderDetails",query:{oid:row.oid}})
                }

            },
            toAddress(){
                this.dialogFormVisible=true
            },
            update(row) {
                var s = row.realPhone
                var a = parseInt(s)
                row.realPhone=a;
                this.empInfo = row;

                this.title2='修改收货地址'
                this.dialogFormVisible2=true
            },
            sub(formName) {
                // 对整个表单进行校验
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        console.log(this.empInfo)
                        this.$http.post("order/address/saveOrUpdate", this.empInfo).then(data => {
                            if (data) {
                                this.$message({
                                    type: 'success',
                                    message: '成功!'
                                });
                                this.reload()//直接调用刷新方法
                                this.dialogFormVisible2=false
                                this.dialogFormVisible=true
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: '失败!'
                                });
                                // this.reload()//直接调用刷新方法
                                this.dialogFormVisible2=false
                                this.dialogFormVisible=true
                            }
                        })
                    }else {
                        console.log('error submit!!')
                        return false;
                    }
                })
            },
            del(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post(`order/address/delete/${row.tid}`).then(data => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.reload()//直接调用刷新方法
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            add(){
                this.empInfo={
                    accountId: sessionStorage.getItem('username'),
                };
                this.dialogFormVisible2 = true
            },
            resetForm() {
                this.dialogFormVisible=false
                this.reload()//直接调用刷新方法
            },
            resetForm2() {
                this.dialogFormVisible2=false
                this.dialogFormVisible=true
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = [];
                for (let valKey in val) {
                    this.multipleSelection.push(val[valKey].tid)
                }
            },
            // 修改当前页显示 多少数据
            handleSizeChange (val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val
            },
            handleSizeChange2 (val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize2 = val
            },
            // 修改当前是 第几页
            handleCurrentChange (val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val
            },
            handleCurrentChange2 (val) {
                // console.log(`当前页: ${val}`);
                this.currentPage2 = val
            },
            handleSelect (key, keyPath) {
                console.log(key, keyPath)
            },
            dd1 () {
                this.$router.push('/login')
            },
            output () {
                this.$router.replace('product')
                sessionStorage.clear()
                localStorage.clear()
                this.$router.go(0)
            },
            selectOrderStade (s) {
                if (s === 0) {
                    this.status = 0
                } else if (s === 1) {
                    this.status = 1
                } else if (s === 2) {
                    this.status = 2
                } else {
                    this.status = 3
                }
                this.$http.post('order/order/findByTbid', {accountId: this.accountId, status: this.status, lableName: this.lableName}).then(data => {
                    this.list = data;
                })
            },


            // 图片上传成功之后调用的方法
            handleAvatarSuccess (res, file) {
                console.log("上传的结果")
                console.log(res);
                console.log("上传的文件信息")
                console.log(file)
                if (res.code === 1) {
                    this.defaultPic = res.pic;

                    // updatePicpath
                    this.$http.post('account/account/updatePicpath', {defaultPic:this.defaultPic,accountId: this.accountId}).then(data => {
                        if (data) {
                            this.$message({
                                type: 'success',
                                message: '修改图片成功!'
                            });
                            this.reload()//直接调用刷新方法
                        } else {
                            this.$message({
                                type: 'info',
                                message: '修改图片失败!'
                            });
                            this.reload()//直接调用刷新方法
                        }
                    })
                } else {
                    this.notify('上传失败', 'error')
                }
            },
            // 图片上传之前调用的方法，验证上传的是否是图片
            beforeAvatarUpload (file) {
                const isJPG = file.type === 'image/jpeg'
                const isLt2M = file.size / 1024 / 1024 < 10
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片不符合规范!')
                }
                return isJPG && isLt2M
            },
            // 上传图片
            insertUrl(){
                return `http://localhost:8092/account/account/insertProductPic`;
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/account/account/findProductPicByPath?name=`+picPath;
            },
        },
    }
</script>

<style scoped>
    #header
    {
        position: absolute;
        top: 25px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 38px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 200px;
    }
    #header > span > button
    {
        position: absolute;
    }
    #header > span > span
    {
        padding: 0px 8px 16px 0px;
        line-height: 40px;
    }

    .brandsDiv{
        margin: auto;
        /*border: 1px solid black;*/
    }
    .brands{
        width: 75%;
        height: 50px;
        list-style: none;
        /*border: 1px solid black;*/
        margin: auto;
    }
    .brands li{
        float: left;
        margin: 10px 10px;
    }
    .dingdanZT{
        width: 250px;
        height: 26px;
        border-bottom: 3px solid #909399;
    }
</style>
